<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
</head>
<body>
<div id="app" class="modal-search-alert" v-cloak>
    <div class="income-type" style="border-top: 1px solid #e6e6e6">
        <div class="type-title">商品来源</div>
        <div class="type-button">
            <a v-myclick="[1, selectType]" :class="{'selectActive': 1 === from_type}"><span>淘宝</span><img
                    v-show="from_type==1 " v-src="'../../image/gross_select1.png'"/></a>
            <a v-myclick="[2, selectType]" :class="{'selectActive': 2 === from_type}"><span>天猫</span><img
                    v-show="from_type==2" v-src="'../../image/gross_select1.png'"/></a>
            <a v-myclick="[3, selectType]" :class="{'selectActive': 3 === from_type}"><span>不限</span><img
                    v-show="from_type==3" v-src="'../../image/gross_select1.png'"/></a>
        </div>
    </div>
    <!--<div class="income-type">-->
    <!--<div class="type-title">是否包邮</div>-->
    <!--<div class="type-button">-->
    <!--<a v-myclick="[1, isExpress]" :class="{'selectActive': 1 === is_free_express}"><span>包邮</span> <img-->
    <!--v-show="is_free_express==1" v-src="'../../image/gross_select1.png'"/></a>-->
    <!--<a v-myclick="[2, isExpress]" :class="{'selectActive': 2 === is_free_express}"><span>不包邮</span><img-->
    <!--v-show="is_free_express==2" v-src="'../../image/gross_select1.png'"/></a>-->

    <!--</div>-->
    <!--</div>-->
    <div class="income-type">
        <div class="type-title">券后价</div>
        <div class="date-select">
            <div class="date-background">
                <input id="input1"
                       @focus="focus.input1 = true"
                       @blur="focus.input1 = false"
                       style="margin-left: 10px;float: left ;text-align: center"
                       :value="params.minPrice | num"
                       @keyup="minPriceChange"
                       type="tel"/>
                <div class="line"><span></span></div>
                <input id="input2"
                       @focus="focus.input2 = true"
                       @blur="focus.input2 = false"
                       style="margin-right: 10px;float: right;text-align: center"
                       :value="params.maxPrice | num"
                       @keyup="maxPriceChange"
                       type="tel"/>
            </div>
        </div>
    </div>
    <div class="income-type">
        <div class="type-title">
            <span style="width: 30%">优惠金额</span>
            <span style="width: 10%;font-size: 18px;">   ≥   </span>
            <input id="input3"
                   @focus="focus.input3 = true"
                   @blur="focus.input3 = false"
                   style="margin-left: 10px;height: 30px;border: 1px solid #e6e6e6;width: 30%;outline: none;-webkit-appearance:none;appearance:none;text-align: center"
                   :value="params.minDiscountPrice | num"
                   @keyup="minDiscountPriceChange"
                   type="tel"/>
        </div>
    </div>
    <div class="op-button">
        <a class="reset" v-myclick="clearModal">重置</a>
        <a class="finish" v-myclick="selectFinish">完成</a>
    </div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/common.js"></script>
<script>
    var vm;
    var category_id;
    var keyword;

    var ifHidden = false;
    apiready = function () {
        setBSImg();

        if (api.pageParam && api.pageParam.category_id) {
            category_id = api.pageParam.category_id;
        }

        if (api.pageParam) {
            var pageParam = api.pageParam;
            category_id = pageParam.category_id || null;
            keyword = pageParam.keyword || null;
        }

        initApp();
        api.parseTapmode();
    };

    function initApp() {
        vm = new Vue({
            el: '#app',
            data: {
                from_type: 0,
                is_free_express: 0,
                minDiscountPrice: '',
                params: {
                    priceOrder: '',
                    saleCountOrder: '',
                    keyword: keyword || '',
                    category_id: category_id || '',
                    from_type: "",
                    minPrice: "",
                    maxPrice: "",
                    minDiscountPrice: '',
                    is_free_express: ""
                },
                focus: {
                    input1: false,
                    input2: false,
                    input3: false,
                }
            },
            watch: {
                focus: {
                    handler: function (n) {
                        if (n.input1 || n.input2 || n.input3) {
                            api.setFrameAttr({
                                name: 'select_frame',
                                rect: {
                                    x: 0,
                                    y: 0,
                                    w: api.winWidth,
                                    h: 340
                                },
                            });
                        } else if (!n.input1 && !n.input2 && !n.input3) {
                            setTimeout(vm.setFrameY102, 200);
                        }
                    },
                    deep: true
                }
            },
            methods: {
                isExpress: function (index) {
                    if (this.is_free_express == index) {
                        this.is_free_express = 0;
                        this.params.is_free_express = '';
                    } else {
                        this.is_free_express = index;
                        if (index == 1) {
                            this.params.is_free_express = 1;
                        }
                        if (index == 2) {
                            this.params.is_free_express = 0;
                        }

                    }
                },
                cancelModal: function () {
                    this.inputBlur();
                    this.showModal = false;
                },
                clearModal: function () {
                    this.from_type = 0;
                    this.is_free_express = 0;
                    this.params.minPrice = '';
                    this.params.maxPrice = '';
                    this.params.minDiscountPrice = '';
                },
                selectFinish: function () {
                    ifHidden = true;
                    api.sendEvent({
                        name: 'select',
                        extra: vm.params,
                    });
                    vm.inputBlur();
                    api.setFrameAttr({
                        name: 'select_frame',
                        hidden: true
                    });
                },
                selectType: function (index) {
                    if (this.from_type == index) {
                        this.from_type = 0;
                        this.params.from_type = '';
                    } else {
                        this.from_type = index;
                        if (index == 1) {
                            this.params.from_type = 1;
                        }
                        if (index == 2) {
                            this.params.from_type = 2;
                        }
                        if (index == 3) {
                            this.params.from_type = '';
                        }
                    }
                },
                inputBlur: function () {
                    for (var i in this.focus) {
                        if (this.focus[i]) {
                            var input = document.getElementById(i);
                            input.blur();
                        }
                    }
                },
                setFrameY102: function () {
                    if(ifHidden) {
                        return;
                    }
                    if (!this.focus.input1 && !this.focus.input2 && !this.focus.input3) {
                        api.setFrameAttr({
                            name: 'select_frame',
                            rect: {
                                x: 0,
                                y: 102,
                                w: api.winWidth,
                                h: 340
                            },
                        });
                    }
                },
                minPriceChange: function (e) {
                    this.params.minPrice = e.target.value;
                    this.$forceUpdate();
                },
                maxPriceChange: function (e) {
                    this.params.maxPrice = e.target.value;
                    this.$forceUpdate();
                },
                minDiscountPriceChange: function (e) {
                    this.params.minDiscountPrice = e.target.value;
                    this.$forceUpdate();
                },
            },
            filters: {
                'num': function (value) {
                    return value.replace(/[^\d]/g, '');
                }
            }
        })
    }
</script>
</html>